<template>
  <div id="addScroing">
    <!-- 设置评分 -->
    <h2 style="margin-bottom: 32px">设置评分</h2>
    <!-- 表单 -->
    <a-form :model="form" ref="formRef" :style="{ width: '480px' }" @submit="handleSubmit" :rules="rules">

      <!-- 应用id -->
      <a-form-item label="应用 id">
        {{ appId }}
      </a-form-item>
      <!-- 应用id -->
      <a-form-item v-if="updateId" tooltip="当前从表格中选中的评分id" label="评分id">
        {{ updateId }}
      </a-form-item>
      <!-- 修改评分id -->
      <!-- <a-form-item v-if="updateId" label="修改评分 id">
        {{ updateId }}
      </a-form-item> -->

      <!-- 结果名称 -->
      <a-form-item field="resultName" label="结果名称">
        <a-input v-model="form.resultName" placeholder="请输入结果名称" />
      </a-form-item>
 
       <!-- 结果描述 -->
       <a-form-item field="resultDesc" label="结果描述">
        <a-input v-model="form.resultDesc" placeholder="请输入结果描述" />
      </a-form-item>

       <!-- 结果图标 -->
       <a-form-item field="resultPicture" label="结果图标">
        <a-input
          disabled
          v-model="form.resultPicture"
          placeholder="请输入结果图标地址"
        />
      </a-form-item>

      <!-- 结果集 -->
      <a-form-item field="resultProp" label="结果集">
        <a-input-tag
          v-model="form.resultProp"
          placeholder="请输出结果集，按回车确认"
          allow-clear
        />
      </a-form-item>

      <!-- 结果得分范围 -->
      <a-form-item field="resultScoreRange" label="得分范围">
        <a-input-number
          v-model="form.resultScoreRange"
          placeholder="请输入结果得分范围"
        />
      </a-form-item>
      

      <!-- 创建按钮   -->
      <a-form-item>
        <a-button  type="primary" style="width:50%" html-type="submit">{{ updateId?'修改评分':'添加评分' }}</a-button>
      </a-form-item>
    </a-form>
    <!-- {{ form }} -->
    <h2>评分管理</h2>
    <ScoringResultTable ref="tableRef" :appId="appId" :doUpdate="doUpdate"/>
    
  </div>
  
</template>

<script setup lang="ts">
import API from "@/api";
import { ref, reactive } from "vue"
import ScoringResultTable from "@/views/add/components/ScoringResultTable.vue";
import {
  addScoringResultUsingPost,
  editScoringResultUsingPost,
} from "@/api/scoringResultController";
import message from "@arco-design/web-vue/es/message";


// 获取子组件实例
const tableRef = ref()

// 定义表单数据
const form = reactive({
  resultDesc: "",
  resultName: "",
  resultPicture: "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a20012a2d4d5b9db43dfc6a01fe508c0.png~tplv-uwbnlip3yd-webp.webp",
} as API.ScoringResultAddRequest)

// 定义校验规则
const rules = {
  appName: [
    { required: true, message: '应用名称不能为空' },
  ],
  appDesc: [
    { required: true, message: '应用描述不能为空' },
  ],
  resultProp: [
    { required: true, message: '结果集不能为空' },
  ],
  resultScoreRange: [
    { required: true, message: '得分范围不能为空' },
    {
      validator: (value:any, cb:any) => {
        if (value <= 0) {
          cb('得分范围不能小宇1~')
        } else {
          cb()
        }
      }
    }
  ],
  appIcon: [
    {
      required: true,
      message:'应用图标不能为空',
    }
  ]
}

// 接收appid
interface Props {
  appId: string;
}

const props = withDefaults(defineProps<Props>(), {
  appId: () => {
    return "";
  },
})

// 设置updaeId来判断是新增还是修改
const updateId = ref<any>()

// 收集子组件通过doUpdate传递过来的表格数据
const doUpdate = (scoringResult: API.ScoringResultVO) => {
  updateId.value = scoringResult.id
  Object.assign(form, scoringResult)
}

// 提交表单
const handleSubmit = async ({value, errors}:any) => {
  if(!errors) {
    // 如果应用Id不存在直接return 
    if(!props.appId) return
    let res:any
    if(updateId.value) {
      res = await editScoringResultUsingPost(form)
      console.log('edit')
    } else {
      // 创建记得添加appid
      console.log('add')
      res = await addScoringResultUsingPost({
        appId: props.appId as any,
        ...form
      })
    }
    if(res.data.code === 0) {
      message.success('操作成功')
    } else {
      message.error('操作失败:' + res.data.message as string)
    }
    // 操作完 刷新表格 重置数据
    if(tableRef.value) {
      tableRef.value.loadData()
      if(form.id) delete form.id
      // 添加可以不用清空表单值,因为很多结果,只是个别属性不同
      // 修改建议全部清空
      if(updateId.value) {
        updateId.value = undefined
        let obj = { 
          resultDesc: "",
          resultName: "",
          resultProp:[],
          resultScoreRange: 0,
          resultPicture: "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a20012a2d4d5b9db43dfc6a01fe508c0.png~tplv-uwbnlip3yd-webp.webp",
        }
        Object.assign(form, obj)
      }
    }
  }
}

</script>
<style lang="scss" scoped>
#addScroing {
  width: 40vw;
  padding: 20px;
  border-radius: 10px;
  background: rgba(255,255,255,.6);
  margin: 0 auto;
  min-width: 400px;
}
</style>